<template>
  <div class="user">
    <!-- <el-row class="topw">
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>园区管理</el-breadcrumb-item>
          <el-breadcrumb-item>会议室</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row> -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="会议室登记列表" name="first">
            <el-row style="padding:10px 0">
              <el-col :span="24">
                <!-- 给组件绑定原生事件的话，需要一个.native的修饰符 -->
                <el-input placeholder="请输入内容" class="search-input" v-model="address" @keydown.native.enter="initList">
                  <el-button slot="append" icon="el-icon-search" @click="initList"></el-button>
                </el-input>
                <el-button type="success" plain @click="addDialogFormVisible=true">添加会议室</el-button>
              </el-col>
            </el-row>
            <el-table class="margin-20" v-loading="loading" :data="MeetList" border style="width: 100%">
              <el-table-column type="index" width="50">
              </el-table-column>
              <el-table-column prop="address" label="会议室地址" width="180">
              </el-table-column>
              <el-table-column prop="name" label="房间号" width="100">
              </el-table-column>
              <el-table-column prop="status" label="是否使用" width="100">
              </el-table-column>
              <el-table-column prop="recommend" label="会议室详情">
              </el-table-column>
              <el-table-column label="会议室图片" width="320">
                <template slot-scope="scope">
                      <img :src="'https://wisdom-city.oss-cn-hangzhou.aliyuncs.com/'+scope.row.picture" width="300" class="head_pic"/>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="125">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="showEditDialog(scope.row)">
                  </el-button>
                  <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="showDeleteDialog(scope.row)">
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="page">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
                :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
            </div>
            <!-- 添加用户对话框 -->
            <el-dialog title="添加会议室列表入录" :visible.sync="addDialogFormVisible">
              <el-form :model="addForm" label-width="160px" :rules="rules" ref="addUserForm">
                <el-form-item label="会议室地址:" prop="address">
                  <el-input v-model="addForm.address" auto-complete="off" ></el-input>
                </el-form-item>
                <el-form-item label="房间号:" prop="name">
                  <el-input v-model="addForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="可参加人数:" prop="numbers">
                  <el-input v-model="addForm.numbers" auto-complete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="会议室详情:" prop="recommend">
                  <el-input v-model="addForm.recommend" auto-complete="off"></el-input>
                </el-form-item> -->
                <el-form-item label="会议室设施:" prop="recommend" >
                  <el-select prefix='iconfont icon-renyuan' v-model="value1" multiple placeholder="请选择" style="width:360px" >
                    <el-option
                      v-for="item in options"
                      :key="item.value.index"
                      :label="item.label"
                      :value="item.value.index"
                      >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开放时间（整点）:" prop="recommend">
                  <el-time-select
                    placeholder="起始时间"
                    v-model="addForm.appointmentTime"
                    :picker-options="{
                      start: '08:00',
                      step: '01:00',
                      end: '20:00'
                    }">
                  </el-time-select>
                  <el-time-select
                    placeholder="结束时间"
                    v-model="addForm.endTime"
                    :picker-options="{
                      start: '08:00',
                      step: '01:00',
                      end: '20:00',
                      minTime: addForm.appointmentTime
                    }">
                  </el-time-select>
                </el-form-item>
                <el-form-item label="会议室照片:" prop="picture">
                  <el-upload
                    class="avatar-uploader"
                    action="https://leather.ztazy.cn:3031/sys/file/file" 
                    :headers="headers"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUserSubmit('addUserForm')">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 编辑用户对话框 -->
            <el-dialog title="编辑会议室列表入录" :visible.sync="editDialogFormVisible">
              <el-form :model="editForm" label-width="160px" :rules="rules" ref="editUserForm">
                <el-form-item label="会议室地址:" prop="address">
                  <el-input v-model="editForm.address" auto-complete="off" ></el-input>
                </el-form-item>
                <el-form-item label="房间号:" prop="name">
                  <el-input v-model="editForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="可参加人数(个):" prop="numbers">
                  <el-input v-model="editForm.numbers" auto-complete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="会议室详情:" prop="recommend">
                  <el-input v-model="editForm.recommend" auto-complete="off"></el-input>
                </el-form-item> -->
                <el-form-item label="会议室设施:" prop="recommend" >
                  <el-select prefix='iconfont icon-renyuan' v-model="value2" multiple placeholder="请选择" style="width:360px" >
                    <el-option
                      v-for="item in options"
                      :key="item.value.index"
                      :label="item.label"
                      :value="item.value.index"
                      >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开放时间（整点）:" prop="recommend">
                  <el-time-select
                    placeholder="起始时间"
                    v-model="editForm.appointmentTime"
                    :picker-options="{
                      start: '08:00',
                      step: '01:00',
                      end: '20:00'
                    }">
                  </el-time-select>
                  <el-time-select
                    placeholder="结束时间"
                    v-model="editForm.endTime"
                    :picker-options="{
                      start: '08:00',
                      step: '01:00',
                      end: '20:00',
                      minTime: editForm.appointmentTime
                    }">
                  </el-time-select>
                </el-form-item>
                <el-form-item label="会议室照片:" prop="picture">
                  <el-upload
                    class="avatar-uploader"
                    action="https://leather.ztazy.cn:3031/sys/file/file" 
                    :headers="headers"
                    :show-file-list="false"
                    :on-success="edithandleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <img v-else :src="'https://wisdom-city.oss-cn-hangzhou.aliyuncs.com/'+editForm.picture" class="avatar">
                  </el-upload>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserSubmit('editUserForm')">确 定</el-button>
              </div>
            </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="会议室申请列表" name="second">
        <el-row style="padding:10px 0">
          <el-col :span="24">
            <!-- 给组件绑定原生事件的话，需要一个.native的修饰符 -->
            <el-input placeholder="请输入内容" class="search-input" v-model="enterpriseName" @keydown.native.enter="initList">
              <el-button slot="append" icon="el-icon-search" @click="initList"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-table class="margin-20" v-loading="loading" :data="ApplyList" border style="width: 100%">
          <el-table-column type="index" width="50">
          </el-table-column>
          <el-table-column prop="enterpriseName" label="企业名称">
          </el-table-column>
          <el-table-column prop="roomName" label="会议室地址">
          </el-table-column>
          <el-table-column prop="appointmentTime" label="预约开始时间">
          </el-table-column>
          <el-table-column prop="endTime" label="预约结束时间">
          </el-table-column>
          <el-table-column  label="预约状态">
            <template slot-scope="scope">
                  {{ scope.row.status === 0 ?  '未批准': '' }}
                  {{ scope.row.status === 1 ?  '已批准': '' }}
              </template>
          </el-table-column>
          <el-table-column label="操作" width="130">
            <template slot-scope="scope" >
              <!-- <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="ApplyshowEditDialog(scope.row)">
              </el-button> -->
              <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="ApplyshowDeleteDialog(scope.row)">
              </el-button>
              <el-button size="mini" type="warning" plain icon="el-icon-check" @click="ApplyshowGrantDialog(scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination @size-change="ApplyhandleSizeChange" @current-change="ApplyhandleCurrentChange" :current-page="1"
            :page-sizes="[10, 20, 30, 40]" :page-size="Applypagesize" layout="total, sizes, prev, pager, next, jumper" :total="Applytotal">
          </el-pagination>
        </div>
        <!-- 编辑用户对话框 -->
        <el-dialog title="编辑会议室申请记录" :visible.sync="ApplyeditDialogFormVisible">
          <el-form :model="ApplyeditForm" label-width="120px" :rules="rules" ref="editUserForm">
            <el-form-item label="企业名称" prop="enterpriseName">
              <el-input v-model="ApplyeditForm.enterpriseName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="会议室地址" prop="roomName">
              <el-input v-model="ApplyeditForm.roomName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="场地预约用途" prop="purpose">
              <el-input v-model="ApplyeditForm.purpose" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="预约开始时间" prop="appointmentTime">
              <el-input v-model="ApplyeditForm.appointmentTime" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="预约结束时间" prop="endTime">
              <el-input v-model="ApplyeditForm.endTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="ApplyeditDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="ApplyeditUserSubmit('ApplyeditUserForm')">确 定</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
  import {
    getMeetList,
    addMeetList,
    editMeetList,
    deleteMeetList,
    Meetimage,
    getMeetapplyList,
    addMeetapplyList,
    editMeetapplyList,
    deleteMeetapplyList,
    statusMeetapplyList
  } from '@/api'
  export default {
    data() {
      return {
        activeName: 'first',
        options: [{
          value: {
            index:0,
            label:'投影仪',
            icon:'icon-touyingyi'
          },
          label: '投影仪',
        }, {
          value: {
            index:1,
            label:'空调',
            icon:'icon-kongtiaokaifang'
          },
          label: '空调'
        }, {
          value: {
            index:2,
            label:'黑板',
            icon:'icon-baibanwhiteboard9'
          },
          label: '黑板'
        }, {
          value: {
            index:3,
            label:'WIFI',
            icon:'icon-sey-wife-a'
          },
          label: 'WIFI'
        }],
        value1: [0,1,2,3],
        value2:[],
        imageUrl: '',
        fileList: [],
        MeetList: [],
        token : localStorage.getItem('mytoken'),
        total: 0,
        picture:"",
        pagesize: 10,
        address:"",
        pagenum: 1,
        addDialogFormVisible: false,
        addForm: {
          appointmentTime: '08:00',
          endTime: '18:00',
          address: '',
          name: '',
          picture: '',
          recommend: '',
          ree:[],
          numbers:''
        },
        editDialogFormVisible: false,
        editForm: {
          appointmentTime: '',
          endTime: '',
          address: '',
          name: '',
          picture: '',
          recommend: '',
          meetingRoomId:"",
          ree:[],
          numbers:''
        },
        grantDialogFormVisible: false,
        grantForm: {},
        roleList: [],
        roleId: '',
        ApplyList: [],
        enterpriseName:"",
        Applytotal: 0,
        Applypagesize: 10,
        Applypagenum: 1,
        ApplyeditDialogFormVisible: false,
        ApplyeditForm: {
          enterpriseName: '',
          purpose: '',
          appointmentTime: '',
          enterpriseInformationId:"",
          fieldApplicationId:'',
          endTime:'',
          meetingRoomId:'',
          roomName:''
        },
        // 添加用户的表单验证
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          enterpriseName: [{
            required: true,
            message: '请输入企业名称',
            trigger: 'blur'
          }]
        },
        
      }
    },
    created() {
      this.initList()
    },
    computed: {
      headers() {
        return{
          "authorization": localStorage.getItem('mytoken') // 直接从本地获取token就行
        }
      }
    },
    methods: {
      handleClick(tab, event) {
      },
      handleAvatarSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.imageUrl = URL.createObjectURL(file.raw);
        this.addForm.picture = res.data.targetName
      },
      edithandleAvatarSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.imageUrl = URL.createObjectURL(file.raw);
        this.editForm.picture = res.data.targetName
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pagesize = val
        this.initList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pagenum = val
        this.initList()
      },
      ApplyhandleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.Applypagesize = val
        this.initList()
      },
      ApplyhandleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.Applypagenum = val
        this.initList()
      },
      initList() {
        this.loading = true
        getMeetList({
          params: {
            address:this.address,
            page: this.pagenum-1,
            size : this.pagesize,
            sortField: 'createTime',
            sortType:'dsc'
          }
        }).then(res => {
          console.log(res)
          this.MeetList = res.data.content
          this.total = res.data.totalElements
          this.loading = false
        })
        getMeetapplyList({
          params: {
            enterpriseName:this.enterpriseName,
            page: this.Applypagenum-1,
            size : this.Applypagesize,
            sortField: 'createTime',
            sortType:'dsc'
          }
        }).then(res => {
          console.log(res)
          this.ApplyList = res.data.content
          this.Applytotal = res.data.totalElements
        })
      },
      // closeDiaglog(){
      //   this.$refs['addUserForm'].resetFields()
      // },
      // 添加用户
      addUserSubmit(formName) {
        this.addForm.ree=[]
        this.value1.forEach(element => {
          this.addForm.ree.push(this.options[element])
        });
        this.addForm.ree = JSON.stringify(this.addForm.ree)
        console.log(this.addForm)
        console.log(this.addForm.endTime.slice(0,2)-this.addForm.appointmentTime.slice(0,2))
        if(this.addForm.endTime.slice(0,2)-this.addForm.appointmentTime.slice(0,2)>9){
          return this.$message({
                  type: 'success',
                  message: '最多设置9小时'
                })
        }
         this.$refs[formName].validate(valide => {
          if (valide) {
            addMeetList(this.addForm).then(res => {
              console.log(res)
              if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '创建用户成功'
                })
              this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.message
                })
              }
              this.addDialogFormVisible = false
            })
          }
        })
      },
      // 显示编辑用户对话框
      showEditDialog(row) {
        this.value2=[]
        this.imageUrl=""
        this.editDialogFormVisible= true
        this.editForm.address = row.address
        this.editForm.name = row.name
        this.editForm.recommend = row.recommend
        this.editForm.picture = row.picture
        this.editForm.meetingRoomId = row.meetingRoomId
        this.editForm.numbers = row.numbers
        this.editForm.appointmentTime = row.appointmentTime
        this.editForm.endTime = row.endTime
        if(row.ree2==null){
          this.value2=[]
        }else{
          row.ree2.forEach(element=>{
          this.value2.push(element.value.index)
        })
        }
      },
      // 编辑用户提交
      editUserSubmit(formName) {
        this.editForm.ree=[]
        this.value2.forEach(element => {
          this.editForm.ree.push(this.options[element])
        });
        this.editForm.ree = JSON.stringify(this.editForm.ree)
        this.$refs[formName].validate(valide => {
          if (valide) {
            editMeetList(this.editForm).then(res => {
              if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                this.editDialogFormVisible = false
                this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.message
                })
              }
            })
          }
        })
      },
      // 显示删除对话框
      showDeleteDialog(row) {
        console.log(row)
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 执行删除用户操作
          deleteMeetList({
          params: {
            meetingRoomId:row.meetingRoomId
          }
        }).then(res => {
            if (res.status === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initList()
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 会议室申请列表
      // 显示编辑用户对话框
      ApplyshowEditDialog(row) {
        console.log(row)
        this.ApplyeditDialogFormVisible = true
        // JSON.parse
        // JSON.stringify
        // getUserById(row.id).then(res => {
        //   if (res.meta.status === 200) {
            this.ApplyeditForm.enterpriseName = row.enterpriseName
            this.ApplyeditForm.purpose = row.purpose
            this.ApplyeditForm.appointmentTime = row.appointmentTime
            this.ApplyeditForm.enterpriseInformationId = row.enterpriseInformationId
            // var demands = JSON.parse(row.demands)
            // console.log(demands)
            this.ApplyeditForm.fieldApplicationId = row.fieldApplicationId
            this.ApplyeditForm.endTime = row.endTime
            this.ApplyeditForm.meetingRoomId = row.meetingRoomId
            this.ApplyeditForm.roomName = row.roomName
        //   }
        // })
      },
      // 编辑用户提交
      ApplyeditUserSubmit(formName) {
        this.$refs[formName].validate(valide => {
          if (valide) {
            console.log(this.ApplyeditForm)
            editMeetapplyList(this.ApplyeditForm).then(res => {
              console.log(res)
              if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                this.ApplyeditDialogFormVisible = false
                this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.meta.msg
                })
              }
            })
          }
        })
      },
      // 显示删除对话框
      ApplyshowDeleteDialog(row) {
        console.log(row)
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 执行删除用户操作
          deleteMeetapplyList({
          params: {
            fieldApplicationId:row.fieldApplicationId
          }
        }).then(res => {
            if (res.status === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initList()
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 显示批准对话框
      ApplyshowGrantDialog(row) {
        this.grantForm = row
        this.grantDialogFormVisible = true
        console.log(row)
        statusMeetapplyList(
            row.fieldApplicationId
        ).then(res => {
          console.log(res)
          if (res.status === 0) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.initList()
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
        })
      },
    }
  }

</script>
<style lang="scss" scoped>
  .user {
    .margin-20 {
      margin: 20px 0;
    }

    .search-input {
      width: 300px;
    }

    .page {
      padding: 5px 0;
      background-color: #D3DCE6;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
